<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>宠物列表</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none; /*清除列表样式*/
        }

        .box {
            width: 260px;
            border: 1px solid #090;
            margin: 50px auto 0; /*上 左右 下*/
            background: url("images/bg.jpg");
            padding: 10px 10px;
        }

        .box > h3 {
            color: white;
            border-left: 4px solid red;
            height: 23px;
            line-height: 23px;
            font-size: 18px;
            font-family: '黑体';
            padding-left: 2px;
        }

        .box ul {
            margin-top: 8px;
            background: white;
            padding: 0 10px;
        }

        .box ul li {
            border-bottom: 1px #666 dashed;
            height: 30px;
            display: flex;
            align-items: center;
        }

        .box ul li div {
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: #000;
        }

        .box ul li a {
            color: #06c;
            margin-left: 4px;
            text-decoration: none;
            font-size: 12px;
        }

    </style>
</head>
<body>

<div id="app">
    <div class="box">
        <h3>{{title}}</h3>
        <ul>
            <li v-for="item in items">
                <div></div>
                <a href="#">{{item}}</a></li>
        </ul>
    </div>
</div>

<script>
    new Vue({
        el: "#app",
        data: {
            title: '爱宠常识',
            items: [
                "养猫对健康更有利",
                "养猫对健康更有利",
                "养猫对健康更有利",
                "养猫对健康更有利",
                "养猫对健康更有利",
                "养猫对健康更有利",
                "养猫对健康更有利",
                "养猫对健康更有利",
                "养猫对健康更有利",
                "养猫对健康更有利",
                "养猫对健康更有利",
                "养猫对健康更有利",
                "养猫对健康更有利",
                "养猫对健康更有利",
            ],
        },
    });
</script>

</body>
</html>